<!--
  * Copyright (c) 2019, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
  *
  * WSO2 Inc. licenses this file to you under the Apache License,
  * Version 2.0 (the "License"); you may not use this file except
  * in compliance with the License.
  * You may obtain a copy of the License at
  *
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Unless required by applicable law or agreed to in writing,
  * software distributed under the License is distributed on an
  * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  * KIND, either express or implied. See the License for the
  * specific language governing permissions and limitations
  * under the License.
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>APIM • Human Interface Guidelines</title>
    <link rel="shortcut icon" type="image/ico" href="assets/images/favicon.png" alt="wso2favicon">
    <link rel="stylesheet" type="text/css" href="assets/style.css">
</head>
<body>
<header>
    <div class="wrapper">
        <h1>APIM &bullet; Human Interface Guidelines</h1>
        <small>Updated: 01 Feb 2021</small>
    </div>
</header>
<div class="wrapper">
    <nav role="navigator">
        <h4>Table of Contents</h4>
        <ol>
            <li><a href="#intro" id="toc-intro">Introduction</a>
                <ol>
                    <li><a href="#roles" id="toc-roles">User Roles</a></li>
                    <li><a href="#customers" id="toc-customers">Customer Distribution</a></li>
                </ol>
            </li>
            <li><a href="#prototypes" id="toc-prototypes">Prototypes</a></li>
            <li><a href="#accessibility" id="toc-accessibility">Accessibility Guidelines</a>
                <ol>
                    <li><a href="#Laws" id="toc-Laws">Accessibility Laws</a></li>
                    <li><a href="#WCAGMap" id="toc-WCAGMap">WCAG 2.1 Map</a></li>
                    <li><a href="#perceivable" id="toc-perceivable">Perceivable</a></li>
                    <li><a href="#operable" id="toc-operable">Operable</a></li>
                    <li><a href="#understandable" id="toc-understandable">Understandable</a></li>
                    <li><a href="#robust" id="toc-robust">Robust</a></li>
                </ol>
            </li>
            <li><a href="#ui_elements" id="toc-ui_elements">UI Elements</a>
                <ol>
                    <li><a href="#buttons" id="toc-buttons">Buttons</a></li>
                    <li><a href="#dialogs" id="toc-dialogs">Dialogs</a></li>
                    <li><a href="#textfields" id="toc-textfields">Text Fields</a></li>
                    <li><a href="#table" id="toc-table">Data Tables</a></li>
                    <li><a href="#infobars" id="toc-infobars">Infobars</a></li>
                    <li><a href="#steppers" id="toc-steppers">Steppers</a></li>
                </ol>
            </li>
            <li><a href="#ux" id="toc-ux">UX Best Practices</a>
                <ol>
                    <li><a href="#rules" id="toc-rules">Immutable Rules</a></li>
                    <li><a href="#heuristics" id="toc-heuristics">Usability Heuristics</a></li>
                    <li><a href="#fittsLaw" id="toc-fittsLaw">Fitts's Law</a></li>
                    <li><a href="#hicksLaw" id="toc-hicksLaw">Hick's Law</a></li>
                    <li><a href="#dohertyThreshol" id="toc-dohertyThreshol">Doherty Threshold</a></li>
                    <li><a href="#jakobsLaw" id="toc-jakobsLaw">Jakob’s Laww</a></li>
                    <li><a href="#commonRegion" id="toc-commonRegion">Law of Common Region</a></li>
                    <li><a href="#proximity" id="toc-proximity">Law of Proximity</a></li>
                    <li><a href="#similarity" id="toc-similarity">Law of Similarity</a></li>
                    <li><a href="#connectedness" id="toc-connectedness">Law of Uniform Connectedness</a></li>
                    <li><a href="#continuation" id="toc-continuation">Law of Continuation</a></li>
                    <li><a href="#millersLaw" id="toc-millersLaw">Miller’s Law</a></li>
                    <li><a href="#razor" id="toc-razor">Occam’s Razor</a></li>
                    <li><a href="#pareto" id="toc-pareto">Pareto Principle</a></li>
                    <li><a href="#parkinsonsLaw" id="toc-parkinsonsLaw">Parkinson’s Law</a></li>
                    <li><a href="#peakEndRule" id="toc-peakEndRule">Peak-End Rule</a></li>
                    <li><a href="#serialPosition" id="toc-serialPosition">Serial Position Effect</a></li>
                    <li><a href="#tesler" id="toc-tesler">Tesler’s Law</a></li>
                    <li><a href="#vonRestorff" id="toc-vonRestorff">Von Restorff Effect</a></li>
                    <li><a href="#zeigarnik" id="toc-zeigarnik">Zeigarnik Effect</a></li>
                    <li><a href="#halo" id="toc-halo">The Halo Effect</a></li>
                    <li><a href="#fPattern" id="toc-fPattern">F-Pattern</a></li>
                    <li><a href="#pragnanz" id="toc-pragnanz">Law of Prägnanz</a></li>
                    <li><a href="#aesthetic" id="toc-aesthetic">Aesthetic Usability Effect</a></li>
                    <li><a href="#selection" id="toc-selection">Selection Options</a></li>
                </ol>
            </li>
        </ol>
    </nav>
    <article id="top">
        <h2 id="intro" class="waypoint">Introduction</h2>
        <p>This document has been produced as a set of guidelines to ensure a rich user
            experience for end users of the API Manager app. </p>
        <p>API Manager 3.x.x is designed to <a href="https://material.io/design/" target="blank">
            material design</a> visual langauage concepts and uses <a href="https://material-ui.com/" target="blank">
            MATERIAL-UI</a> (V 4.4.2) for UI components. You can use <a href="https://material-ui.com/components/box/"
                                                              target="blank">MUI component library</a> for your user
            interface developments.</p>
        <p>We will define set of guidelines so that user interfaces will be consistent throughout the
            application.</p>

        <section id="roles" class="waypoint">
            <h3>User Roles</h3>
            <h4>API Publisher</h4>
            <p>
                An API publisher (API provider) is an API product manager. He/she manages a set of APIs and API
                products across the enterprise or business unit and controls the API lifecycle, subscriptions,
                and monetization aspects of an API or API product. The API Publisher can also analyze usage patterns
                for APIs and access all APIs statistics.
            </p>
            <h4>API Creator</h4>
            <p>
                An API Creator is a person in a technical role who understands the technical aspects of the API
                (interfaces, documentation, versions, etc.) and uses the API Publisher portal for the design and
                development of APIs. APIs created by an API creator are managed (lifecycle managed and productized)
                by an API product manager.
            </p>
            <h4>API Subscriber</h4>
            <p>
                A subscriber is a consumer of an API. He/she intends to develop one or more applications that consume
                APIs on the developer portal. A subscriber uses the API developer portal to discover APIs, read the
                documentation and forums, rate/comment on the APIs, subscribe, obtain keys, and finally use APIs
                from their applications.
            </p>

            <h4>Admin</h4>
            <p>
                The admin user is responsible for managing the admin portal, which includes tasks such as approving
                workflows, managing rate limiting policies, configuring emails for bot detection/alerts, viewing the
                state and health of APIs, etc. In addition, the admin user is also capable of carrying out general
                administrative tasks such as managing users, roles, databases, security, etc.
            </p>
        </section>

        <section id="customers" class="waypoint">
            <h3>Customer Distribution by Region</h3>
            <p>
                Customer Distribution by Region as of January 2020
            </p>
            <img width="600" src="assets/images/customers.png" alt="Customer Distribution by Region"/>
            <p> Find more on
                <a href="https://docs.google.com/spreadsheets/d/1gXqP4NHhqfnzZnjTI_8rh-Y8XGyj0qpCz3FegMMzL0A/"
                   target="blank">APIM Customers - Region & Country</a>
            </p>
        </section>

        <section id="prototypes" class="waypoint">
            <h3>Prototypes</h3>
            <h4>APIM Publisher</h4>
            <img width="600" src="assets/images/publisher_list.png" alt="Deployements"/>
            <p> Prototype Link of
                <a href="https://xd.adobe.com/view/be3fc799-0d72-473d-a515-9f7665b5d08a-eb6c/?fullscreen"
                   target="blank">APIM Publisher</a>
            </p>
            <div class="white-space"></div>
            <h4>APIM Developer Portal</h4>
            <img width="600" src="assets/images/dev_portal.png" alt="APIM Developer Portal"/>
            <p> Prototype Link of
                <a href="https://xd.adobe.com/view/67c2ddac-11d7-4ebc-8f34-2544f4d01770-3291/?fullscreen"
                   target="blank">APIM Developer Portal</a>
            </p>
            <div class="white-space"></div>
            <h4>Deployements</h4>
            <img width="600" src="assets/images/deployments.png" alt="Deployements"/>
            <p> Prototype Link of
                <a href="https://xd.adobe.com/view/aa02d5e0-0dfb-4553-9ee6-545f262c6458-ff51/?fullscreen"
                   target="blank">Deployements</a>
            </p>
            <div class="white-space"></div>
            <h4>Comments</h4>
            <img width="600" src="assets/images/comments.png" alt="Comments"/>
            <p> Prototype Link of
                <a href="https://xd.adobe.com/view/be3fc799-0d72-473d-a515-9f7665b5d08a-eb6c/screen/3fb2c4bb-13bc-4d72-ade5-6db4cf64c0c0?fullscreen"
                   target="blank">Comments</a>
            </p>
            <div class="white-space"></div>
            <h4>Service Catalog</h4>
            <img width="600" src="assets/images/service_catalog_onboarding.png" alt="Service Catalog"/>
            <p> Prototype Link of
                <a href="https://xd.adobe.com/view/be3fc799-0d72-473d-a515-9f7665b5d08a-eb6c/screen/f21c2adf-cdec-4c5a-8c1d-641a459d695c?fullscreen"
                   target="blank">Service Catalog</a>
            </p>
            <div class="white-space"></div>
            <h4>Async API</h4>
            <img width="600" src="assets/images/async_api.png" alt="Async API"/>
            <p> Prototype Link of
                <a href="https://xd.adobe.com/view/67c2ddac-11d7-4ebc-8f34-2544f4d01770-3291/screen/a721a5fb-c098-4ab4-ae55-b40c2ec9859e/?fullscreen"
                   target="blank">Async API</a>
            </p>
            <div class="white-space"></div>
            <h4>Admin Portal</h4>
            <img width="600" src="assets/images/Admin_Portal.png" alt="Admin Portal"/>
            <p> Prototype Link of
                <a href="https://xd.adobe.com/view/2de3c71c-d1c7-4ea1-4c5d-72103c158311-5bd2/?fullscreen"
                   target="blank">Admin Portal</a>
            </p>
        </section>

        <hr>

        <h2 id="accessibility" class="waypoint">Accessibility Guidelines</h2>

        <p>
            The <b>WSO2 APIM  Developer Portal</b> is now in Conformance to Level A and Level AA Success Criterias of the Conformance requirements of the <b>Web Content Accessibility Guidelines 2.1</b>
            (  <a href="https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=111%2C123%2C141%2C143%2C144%2C146%2C1412%2C1413%2C211%2C231%2C243%2C244%2C245%2C246%2C247%2C248%2C249%2C2410%2C251%2C252%2C253%2C254%2C311%2C316%2C321%2C322%2C323%2C324%2C325%2C331%2C332%2C411%2C412%2C1411&currentsidebar=%23col_overview&levels=aaa&technologies=smil%2Cpdf%2Cflash%2Csl"
            target="blank">WCAG 2.1</a> ).
        </p>

        <p>
            This will make content more accessible to a wider range of people with disabilities and more usable to users in general.
            With this all functionality of the Developer Portal, it is now operable through a keyboard interface. 
            Color is not used as the only visual means of conveying information anymore. Content is now robust and understandable making it more user friendly and easy to use.
        </p>

        <section id="Laws" class="waypoint">
            <h3>Accessibility Laws</h3>
            <ul>
                <li>
                    Section 508 of the Rehabilitation Act of 1973
                </li>
                <li>
                    Section 255 of the Telecommunications Act of 1996
                </li>
                <li>
                    The Americans with Disabilities Act of 1990 - ADA
                </li>
                <li>
                    Information and Communication Technology (ICT) Final Standards and Guidelines - 2017
                </li>
                <li>
                    EU Web Accessibility Directive  - 2016
                </li>
                <li>
                    European Accessibility Act of 2019
                </li>
                <li>
                    Australia Disability Discrimination Act 1992 (DDA)
                </li>
            </ul>
           
            <p> Find more on
                <a href="https://www.smashingmagazine.com/2014/03/design-principles-visual-perception-and-the-principles-of-gestalt/"
                   target="blank">Accessibility Laws</a>
            </p>
        </section>

        <h3 id="WCAGMap" class="waypoint"> WCAG Quick Reference</h3>

        <iframe src="assets/images/wcag2.1_map.pdf#toolbar=0" width="100%" height="517px"></iframe>
        <a href="https://uxhints.com/wp-content/uploads/wcag2.1_map_uxhints.com_.pdf"
                   target="blank">View large Map</a>

        <h3 id="perceivable" class="waypoint">Perceivable</h3>

        <p>
            Information and user interface components must be presentable to users in ways they can perceive.
        </p>

        <p>
            This principle addresses the fundamentals of information and content presentation, such as compositional sequence, 
            colors, contrasts, contextual relationships and display of text
        </p>

        <h6><a href="https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=111%2C123%2C141%2C143%2C144%2C146%2C1412%2C1413%2C211%2C231%2C243%2C244%2C245%2C246%2C247%2C248%2C249%2C2410%2C251%2C252%2C253%2C254%2C311%2C316%2C321%2C322%2C323%2C324%2C325%2C331%2C332%2C411%2C412%2C1411&currentsidebar=%23col_overview&levels=aaa&technologies=smil%2Cpdf%2Cflash%2Csl#text-alternatives" target="blank">1.1 – Text Alternatives </a></h6>

        <p>Provide text alternatives for any non-text content. Add descriptive text for image alternate text. Group image and text to same element.</p>

        <section class="example" id="example-2">
        <pre xml:space="preserve">
    &lt;a href="home.html"&gt;Zz
        &lt;img src="house.gif" alt="home page icon"&gt;
        Go to the home page
    &lt;/a&gt;</pre></section>

        <div class="white-space"></div>

        <p>Use aria-label to provide labels for objects/groups</p>

            <section class="example" id="example-1-distinguishing-navigation-landmarks">
                <pre xml:space="preserve">      
    &lt;div role="navigation" aria-label="Primary"&gt;
        &lt;ul&gt;&lt;li&gt;...a list of links here ...&lt;/li&gt;&lt;/ul&gt;
    &lt;/div&gt;
 
    &lt;div role="navigation" aria-label="Secondary"&gt;
        &lt;ul&gt;&lt;li&gt;...a list of links here ...&lt;/li&gt; &lt;/ul&gt;
    &lt;/div&gt;</pre></section>    

    <div class="white-space"></div>
    
    <p>Use aria-labelledby to provide short description for a complex graphics</p>

    <section class="example" id="example-1-providing-a-short-description-for-a-complex-graphic">
        <p>This example shows how to use the <code class="att">aria-labelledby</code> attribute to provide a short text description for a read-only complex graphic of
           an star rating pattern; the graphic is composed of several image elements. The text
           alternative for the graphic is the label, visible on the page beneath the star pattern.
        </p>
        <pre xml:space="preserve">    &lt;div role="img" aria-labelledby="star_id"&gt;
        &lt;img src="fullstar.png" alt=""/&gt;
        &lt;img src="fullstar.png" alt=""/&gt;
        &lt;img src="fullstar.png" alt=""/&gt;
        &lt;img src="fullstar.png" alt=""/&gt;
        &lt;img src="emptystar.png" alt=""/&gt;
    &lt;/div&gt;

    &lt;div id="star_id"&gt;4 of 5&lt;/div&gt;</pre>
     </section>

     <h6><a href="https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=111%2C123%2C141%2C143%2C144%2C146%2C1411%2C1412%2C1413%2C211%2C231%2C243%2C244%2C245%2C246%2C247%2C248%2C249%2C2410%2C251%2C252%2C253%2C254%2C311%2C316%2C321%2C322%2C323%2C324%2C325%2C331%2C332%2C411%2C412%2C131&currentsidebar=%23col_overview&levels=aaa&technologies=smil%2Cpdf%2Cflash%2Csl#adaptable" target="blank">1.3 – Adaptable </a></h6>

    <p>Create content that can be presented in different ways (for example simpler layout) without losing information or structure.</p>

    <div class="white-space"></div>
    
     <p><a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA11.html" target="blank">ARIA11</a> Using ARIA landmarks to identify regions of a page. Landmarks are inserted into the page using the role attribute</p>

     <ul>
       <li><b>banner:</b> A region that contains the prime heading or internal title of a page.</li>
       <li><b>complementary:</b> Any section of the document that supports the main content, yet is separate and meaningful on its own.</li>
       <li><b>contentinfo:</b> A region that contains information about the parent document such as copyrights and links to privacy statements.</li>
       <li><b>form:</b> A region of the document that represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing.</li>
       <li><b>main:</b> Main content in a document. In almost all cases a page will have only one role="main".</li>
       <li><b>navigation:</b> A collection of links suitable for use when navigating the document or related documents.</li>
       <li><b>search:</b> The search tool of a Web document.</li>
       <li><b>application:</b> A region declared as a web application, as opposed to a web document.</li>
     </ul>

     <section class="example" id="example-1-simple-landmarks">
        <p>The following example shows how landmarks might be added
        </p><pre xml:space="preserve">
    &lt;div id="header" role="banner"&gt;A banner image and introductory title&lt;/div&gt;
    &lt;div id="sitelookup" role="search"&gt;....&lt;/div&gt;
    &lt;div id="nav" role="navigation"&gt;...a list of links here ... &lt;/div&gt;
    &lt;div id="content" role="main"&gt; ... Ottawa is the capital of Canada ...&lt;/div&gt;
    &lt;div id="rightsideadvert" role="complementary"&gt;....an advertisement here...&lt;/div&gt;
    &lt;div id="footer" role="contentinfo"&gt;(c)The Freedom Company, 123 Freedom Way, Helpville, USA&lt;/div&gt;</pre>

<pre xml:space="preserve">
    &lt;div id="leftnav" role="navigaton" aria-labelledby="leftnavheading"&gt;
    &lt;h2 id="leftnavheading"&gt;Institutional Links&lt;/h2&gt;
    &lt;ul&gt;&lt;li&gt;...a list of links here ...&lt;/li&gt; &lt;/ul&gt;&lt;/div&gt;
    &lt;div id="rightnav" role="navigation" aria-labelledby="rightnavheading"&gt;
    &lt;h2 id="rightnavheading"&gt;Related topics&lt;/h2&gt;
    &lt;ul&gt;&lt;li&gt;...a list of links here ...&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;</pre>
</section>
<div class="white-space"></div>
<p><a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA12.html" target="blank">ARIA12</a> Use role=heading to identify headings</p>

<section class="example" id="example-1-simple-headings">
    <pre xml:space="preserve">
    &lt;div role="heading"&gt;Global News items&lt;/div&gt;
    ... a list of global news with editorial comment....

</pre>

<pre xml:space="preserve">
    &lt;h5&gt;Fruit Trees&lt;/h5&gt;
    ...
    &lt;h6&gt;Apples&lt;/h6&gt;
    &lt;p&gt;Apples grow on trees in areas known as orchards...&lt;/p&gt;
    ...
    &lt;div role="heading" aria-level="7"&gt;Jonagold/div&gt;
    &lt;p&gt;Jonagold is a cross between the Golden Delicious and Jonathan varieties...&lt;/p&gt;
</pre>

</section>

        <h6><a href="https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=111%2C123%2C131%2C132%2C133%2C141%2C143%2C144%2C146%2C1411%2C1412%2C1413%2C211%2C231%2C243%2C244%2C245%2C246%2C247%2C248%2C249%2C2410%2C251%2C252%2C253%2C254%2C311%2C316%2C321%2C322%2C323%2C324%2C325%2C331%2C332%2C411%2C412%2C134&currentsidebar=%23col_overview&levels=aaa&technologies=smil%2Cpdf%2Cflash%2Csl#distinguishable" target="blank">1.4 – Distinguishable </a></h6>

        <p>Make it easier for users to see and hear content including separating foreground from background.</p>
        
        <p>Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.</p>

        <div class="white-space"></div>

        <p> <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G14.html" target="blank">G14</a> Information conveyed by color differences is also available in text</p>

        <p>A form using red color asterisk to indicate required fields, should state instructions at the top of the form</p>
        
        <img width="600" src="assets/images/required_fields.png" alt=""/>

        <div class="white-space"></div>

        <p> <a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G14.html" target="blank">G183</a> Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them</p>
        
        <section class="example" id="example-1-colors-that-would-provide-31-contrast-with-black-words-and-4.51-contrast-with-a-white-background">
            <p>Use colors that would provide 3:1 contrast with black words and 4.5:1 contrast
               with a white background
            </p>
            <p class="working-example">Refer to
                <a href="https://www.w3.org/WAI/WCAG21/working-examples/link-contrast/" target="blank">Links with a 3:1 contrast ratio with surrounding text</a>  
            </p>
         </section>

         <div class="white-space"></div>

        <p><a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F81.html" target="blank">F81</a> Error fields should not be identified using color differences only.</p>

        <img width="600" src="assets/images/error_fields.png" alt=""/>

        <div class="white-space"></div>
         
        <p><a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html" target="blank">G18</a> Ensure that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text.</p>

        <div class="white-space"></div>
        
        <h3 id="operable" class="waypoint">Operable</h3>

        <p>User interface components and navigation must be operable.</p>

        <h6><a href="https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=111%2C123%2C131%2C132%2C133%2C134%2C141%2C143%2C144%2C146%2C1410%2C1411%2C1412%2C1413%2C211%2C231%2C243%2C244%2C245%2C246%2C247%2C248%2C249%2C2410%2C251%2C252%2C253%2C254%2C311%2C316%2C321%2C322%2C323%2C324%2C325%2C331%2C332%2C411%2C412%2C124&currentsidebar=%23col_overview&levels=aaa&technologies=smil%2Cpdf%2Cflash%2Csl#keyboard" target="blank">2.1.1 Keyboard </a></h6>

        <p>All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes.</p>
        
        <h6><a href="https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=111%2C123%2C124%2C131%2C132%2C133%2C134%2C141%2C143%2C144%2C146%2C1410%2C1411%2C1412%2C1413%2C211%2C222%2C231%2C243%2C244%2C245%2C246%2C247%2C248%2C249%2C2410%2C251%2C252%2C253%2C254%2C311%2C316%2C321%2C322%2C323%2C324%2C325%2C331%2C332%2C411%2C412&currentsidebar=%23col_overview&levels=aaa&technologies=smil%2Cpdf%2Cflash%2Csl#seizures-and-physical-reactions" target="blank">2.3 – Seizures and Physical Reactions</a></h6>

        <p>Do not design content in a way that is known to cause seizures or physical reactions.</p>

        <p><a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G19.html" target="blank">G19</a> Ensuring that no component of the content flashes more than three times in any 1-second period.</p>

        <h6><a href="https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=111%2C123%2C124%2C131%2C132%2C133%2C134%2C141%2C143%2C144%2C146%2C1410%2C1411%2C1412%2C1413%2C211%2C231%2C241%2C243%2C244%2C245%2C246%2C247%2C248%2C249%2C2410%2C251%2C252%2C253%2C254%2C311%2C316%2C321%2C322%2C323%2C324%2C325%2C331%2C332%2C411%2C412%2C242&currentsidebar=%23col_overview&levels=aaa&technologies=smil%2Cpdf%2Cflash%2Csl#navigable" target="blank">2.4 – Navigable</a></h6>

        <p>Provide ways to help users navigate, find content, and determine where they are.</p>

        <p><a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G88.html" target="blank">G88</a> Providing descriptive titles for Web pages.</p>

        <section class="example" id="example-1">
        <pre xml:space="preserve">&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;   
&lt;head&gt;     
   &lt;title&gt;The World Wide Web Consortium&lt;/title&gt;     
&lt;/head&gt;   
&lt;body&gt;     
   ...   
&lt;/body&gt; 
&lt;/html&gt;  </pre></section>

        
        <h6><a href="https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=111%2C123%2C124%2C131%2C132%2C133%2C134%2C141%2C143%2C144%2C146%2C1410%2C1411%2C1412%2C1413%2C211%2C231%2C241%2C243%2C244%2C245%2C246%2C247%2C248%2C249%2C2410%2C251%2C252%2C253%2C254%2C311%2C316%2C321%2C322%2C323%2C324%2C325%2C331%2C332%2C411%2C412%2C242&currentsidebar=%23col_overview&levels=aaa&technologies=smil%2Cpdf%2Cflash%2Csl#navigable" target="blank">2.4 – Navigable</a></h6>

        <p>Provide ways to help users navigate, find content, and determine where they are.</p>

        <p><a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G88.html" target="blank">G88</a> Providing descriptive titles for Web pages.</p>

        <section class="example" id="example-1">
        <pre xml:space="preserve">&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
   &lt;title&gt;The World Wide Web Consortium&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
   ...
&lt;/body&gt;
&lt;/html&gt;  </pre></section>


        <div class="white-space"></div>

        <p><a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H4.html" target="blank">H4</a> Create a logical tab order.</p>

        <section class="example" id="example-2">
            <p>A Web page contains a search field in the upper right corner. The field is given
                tabindex="1" so that it will occur first in the tab order, even though it is not
                first in the content order.
            </p>
        </section>

        <div class="white-space"></div>

        <p><a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G91.html" target="blank">G91</a> Provide link text that describes the purpose of a link.</p>

        <p><a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G130.html" target="blank">G130</a> Provide descriptive headings.</p>

        <p>Page should have a H1 heading </p>

        <section class="example" id="example-1">
            <p>An HTML page that describes the range of tasks for disaster preparation may have the
                following headings:
            </p><pre xml:space="preserve">              &lt;h1&gt;Disaster preparation&lt;/h1&gt;
             &lt;h2&gt;Flood preparation&lt;/h2&gt;
             &lt;h2&gt;Fire preparation&lt;/h2&gt;
         </pre>
        </section>

        <div class="white-space"></div>

        <p><a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G211.html" target="blank">G211</a> Match the accessible name to the visible label.</p>

        <h3 id="understandable" class="waypoint">Understandable</h3>

        <p>Information and the operation of the user interface must be understandable.</p>

        <div class="white-space"></div>

        <p><a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H57.html" target="blank">H57</a> Set the page language attribute </p>

        <div class="white-space"></div>

        <p><a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G107.html" target="blank">G107</a> On Focus should not be used as action trigger.</p>

        <div class="white-space"></div>

        <p><a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G61.html" target="blank">G61</a> Navigation should be consistent across pages.</p>

        <div class="white-space"></div>

        <p><a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G197.html" target="blank">G197</a> Consistent identification for the same functionality,throught the application.</p>

        <div class="white-space"></div>

        <h6><a href="https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=111%2C123%2C124%2C131%2C132%2C133%2C134%2C141%2C143%2C144%2C146%2C1410%2C1411%2C1412%2C1413%2C211%2C231%2C241%2C242%2C243%2C244%2C245%2C246%2C247%2C248%2C249%2C2410%2C251%2C252%2C253%2C254%2C311%2C316%2C321%2C322%2C323%2C324%2C325%2C331%2C332%2C411%2C412%2C312&amp;currentsidebar=%23col_overview&amp;levels=aaa&amp;technologies=smil%2Cpdf%2Cflash%2Csl#input-assistance" target="blank">3.3 – Input Assistance</a></h6>

        <p>Help users avoid and correct mistakes.</p>

        <p><a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA18.html" target="blank">ARIA18</a> Use aria-alertdialog to Identify Errors</p>

        <section class="example" id="example-1-alert-dialog">
            <p>This example shows how a notification using role="alertdialog" can be used to notify
                someone they have entered invalid information.
            </p><pre xml:space="preserve">&lt;div role="alertdialog" aria-labelledby="alertHeading" aria-describedby="alertText"&gt;
&lt;h1 id="alertHeading"&gt;Error&lt;/h1&gt;
&lt;div id="alertText"&gt;Employee's Birth Date is after their hire date. Please verify the birth date and hire date.&lt;/div&gt;
&lt;button&gt;Save and Continue&lt;/button&gt;
&lt;button&gt;Return to page and correct error&lt;/button&gt;
&lt;/div&gt;</pre>
        </section>

        <div class="white-space"></div>

        <p><a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA1.html" target="blank">ARIA1</a> Use the aria-describedby property to provide a descriptive label for user interface controls</p>

        <section class="example" id="example-2-using-aria-describedby-to-associate-instructions-with-form-fields">
            <p>Sample form field using <code class="att">aria-describedby</code> to associate instructions with form fields while there is a form label.
            </p><pre xml:space="preserve">&lt;form&gt;
&lt;label for="fname"&gt;First name&lt;/label&gt;
&lt;input name="" type="text" id="fname" aria-describedby="int2"&gt;
&lt;p id="int2"&gt;A bit of instructions for this field linked with aria-describedby. &lt;/p&gt;
&lt;/form&gt;
</pre></section>

        <h3 id="robust" class="waypoint">Robust</h3>

        <p>Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies.</p>

        <p><a href="https://www.w3.org/WAI/WCAG21/Techniques/general/G134.html" target="blank">G134</a> Validate Web pages</p>

        <p><a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F77.html" target="blank">F77</a> Avoid duplicate IDs</p>

        <p><a href="https://www.w3.org/WAI/WCAG21/Techniques/failures/F70.html" target="blank">F70</a> Avoid incorrect use of start and end tags or attribute markup</p>

        <p><a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA14.html" target="blank">ARIA14</a> Use aria-label to provide an invisible label where a visible label cannot be used</p>

        <section class="example" id="example-1-a-close-button-x-in-a-pop-up-box">
            <p>On a page, a link displays a pop-up box (a div) with additional information. The 'close'
                element is implemented as a button containing merely the letter 'x'. The property
                aria-label="close" is used to provide an accessible name to the button.

            </p><pre xml:space="preserve">&lt;div id="box"&gt;
This is a pop-up box.
&lt;button aria-label="Close" onclick="document.getElementById('box').style.display='none';" class="close-button"&gt;X&lt;/button&gt;
&lt;/div&gt;</pre>
        </section>

        <div class="white-space"></div>

        <section class="example" id="example-2-a-phone-number-with-multiple-fields">
             <pre xml:space="preserve">&lt;div role="group" aria-labelledby="groupLabel"&gt;
&lt;span id="groupLabel&gt;Work Phone&lt;/span&gt;
+&lt;input type="number" aria-label="country code"&gt;
&lt;input type="number" aria-label="area code"&gt;
&lt;input type="number" aria-label="subscriber number"&gt;
&lt;/div&gt;</pre></section>


        <p><a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA16.html" target="blank">ARIA16</a> Use aria-labelledby to provide a name for user interface controls</p>

        <section class="example" id="example-1-labelling-a-simple-text-field">
            <p>The following is an example of <code class="att">aria-labelledby</code> used on a simple text field to provide a label in a situation where there is no text
                available for a dedicated label but there is other text on the page that can be used
                to accurately label the control.
            </p><pre xml:space="preserve">&lt;input name="searchtxt" type="text" aria-labelledby="searchbtn"&gt;
&lt;input name="searchbtn" id="searchbtn" type="submit" value="Search"&gt;</pre></section>

        <section class="example" id="example-3-a-label-from-multiple-sources">
            <p>The following example of <code class="att">aria-labelledby</code> with multiple references uses the <code class="el">label</code> element. For additional detail on concatenating multiple sources of information into
                a label with <code class="att">aria-labelledby</code>, please view the technique <a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA9">ARIA9: Using aria-labelledby to concatenate a label from several text nodes</a>.

            </p><pre xml:space="preserve">&lt;label id="l1" for="f3"&gt;Notify me&lt;/label&gt;
&lt;select name="amt" id="f3" aria-labelledby="l1 f3 l2"&gt;
&lt;option value="1"&gt;1&lt;/option&gt;
&lt;option value="2"&gt;2&lt;/option&gt;
&lt;/select&gt;
&lt;span id="l2" tabindex="-1"&gt;days in advance&lt;/span&gt;</pre><p>Note: The use of the <code class="el">label</code> element is included for a number of reasons. If the user clicks on the text of the
            <code class="el">label</code> element, the corresponding form field will receive focus, which makes the clicking
            target larger for people with dexterity problems. Also the <code class="el">label</code> element will always be exposed via the accessibility API. A <code class="el">span</code> could have been used (but if so, it should receive a tabindex="-1" so that it will
            be exposed via the accessibility API in all versions of Internet Explorer). However,
            a <code class="el">span</code> would lose the advantage of the larger clickable region.

        </p>
        </section>

        <div class="white-space"></div>

        <p><a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA22.html" target="blank">ARIA22</a> Use role=status to present status messages.</p>

        <section class="example" id="example-1-including-a-search-results-message">
            <p>After a user presses a Search button, the page content is updated to include the results
                of the search, which are displayed in a section below the Search button. The change
                to content also includes the message "5 results returned" near the top of this new
                content. This text is given an appropriate role for a status message. A screen reader
                will announce "Five results returned".
            </p><pre xml:space="preserve"><code>
 &lt;div role="status"&gt;5 results returned.&lt;/div&gt;
</code>
                 </pre>
        </section>

        <p><a href="https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA23.html" target="blank">ARIA23</a> Use rrole=log to identify sequential information updates.</p>

        <section class="example" id="example-1-updating-the-contents-of-a-chat-conversation">
            <pre xml:space="preserve"><code>
 &lt;div id="chatRegion" role="log" aria-labelledby="chatHeading"&gt;
     &lt;h4 id="chatHeading"&gt;Chat History&lt;/h4&gt;
     &lt;ul id="conversation"&gt;
         &lt;li&gt;The latest chat message&lt;/li&gt;
     &lt;/ul&gt;
 &lt;/div&gt;
</code>
</pre>
        </section>

        <div class="white-space"></div>

        <hr>

        <h2 id="ui_elements" class="waypoint">User Interface Elements</h2>
        <section id="buttons" class="waypoint">
            <h3>Buttons</h3>
            <p>Buttons allow users to take actions, and make choices, with a single tap. Button pannel is left aligned
                and primary button is placed first.</p>
            <ul>
                <li>
                    Primary button color set to primary. => color="primary"
                </li>
                <li>
                    Secondary button do not set the color so it will be default.
                </li>
                <li>
                    Spacing should be one unit in-between two buttons.
                </li>
            </ul>
            <p>&nbsp;</p>
            <h4>Primary Action ( High emphasis )</h4>
            <p>When it is the primary action of the user interface use
                <a href="https://material-ui.com/components/buttons/#contained-buttons">Contained Buttons </a> for
                primary action and <a href="https://material-ui.com/components/buttons/#text-buttons" target="blank">
                    Text Buttons</a> for other actions. Usually there is only one primary action per user interface.
            </p>
            <img width="600" src="assets/images/forms.png" alt=""/>
            <h4>Secondary Action ( Medium emphasis )</h4>
            <p>When it is a secondary action of the user interface use
                <a href="https://material-ui.com/components/buttons/#outlined-buttons" target="blank">Outlined
                    Buttons</a>
                for main action button and <a href="https://material-ui.com/components/buttons/#text-buttons"
                                              target="blank">Text Buttons</a> for other actions
            </p>
            <p>Usually there can be many secondary actions per user interface.</p>

            <img width="600" src="assets/images/buttons.png" alt=""/>

        </section>
        <section id="dialogs" class="waypoint">
            <h3>Dialogs</h3>
            <p>Dialogs inform users about a task and can contain critical information, require decisions, or involve
                multiple tasks.
            </p>
            <h4>When to use </h4>
            <p>Dialogs should be used for:</p>
            <ul class="lst-kix_36sx301u5cnj-0 start">
                <li>Errors that block an app’s normal operation</li>
                <li>Critical information that requires a specific user task, decision, or acknowledgement</li>
            </ul>
            <table class="s-tag-table">
                <tbody>
                <tr>
                    <td colspan="1" rowspan="1"><p><strong>Component</strong></p></td>
                    <td colspan="1" rowspan="1"><p><strong>Priority</strong></p></td>
                    <td colspan="1" rowspan="1"><p><strong>User action</strong></p></td>
                </tr>
                <tr>
                    <td colspan="1" rowspan="1"><p>Snackbar</p></td>
                    <td colspan="1" rowspan="1"><p>Low priority</p></td>
                    <td colspan="1" rowspan="1"><p>Optional: Snackbars disappear automatically</p></td>
                </tr>
                <tr>
                    <td colspan="1" rowspan="1"><p>Banner</p></td>
                    <td colspan="1" rowspan="1"><p>Prominent, medium priority</p></td>
                    <td colspan="1" rowspan="1"><p>Optional: Banners remain until dismissed by the user, or if the
                        state
                        that caused the banner is resolved </p></td>
                </tr>
                <tr>
                    <td colspan="1" rowspan="1"><p>Dialog</p></td>
                    <td colspan="1" rowspan="1"><p>Highest priority</p></td>
                    <td colspan="1" rowspan="1"><p>Required: Dialogs block app usage until the user takes a dialog
                        action or exits the dialog (if available)</p></td>
                </tr>
                </tbody>
            </table>

            <h4>Title</h4>
            <p>A dialog’s purpose should be communicated by its title and button text.</p>
            <p>Titles should:</p>
            <ul>
                <li>
                    Contain a brief, clear statement or question
                </li>
                <li>
                    Avoid apologies (“Sorry for the interruption”), alarm (“Warning!”), or
                    ambiguity (“Are you sure?”)
                </li>
            </ul>
            <h4>Buttons</h4>
            <ul>
                <li>
                    Button panel should right align
                </li>
                <li>
                    Place the confirming action last
                </li>
            </ul>
            <img width="600" src="assets/images/dialog.png" alt=""/>

        </section>
        <section id="textfields" class="waypoint">
            <h3>Text Fields</h3>
            <p>Text fields allow users to enter text into a UI. They typically appear in forms and dialogs.
                Use outlined styling as the default styling for all the text fields.</p>
            <h4>Required text indicator</h4>
            <p>To indicate that a field is required, display an asterisk (*) next to the label text and mention near
                the form that asterisks indicate required fields.
            </p>
            <ul>
                <li>
                    If some fields are required, indicate all required ones
                </li>
                <li>
                    If most fields are required, indicate optional fields by displaying the word “optional”
                    in parentheses next to the label text
                </li>
                <li>
                    If all fields are required we can mention that near the form
                </li>
            </ul>
            <img width="600" src="assets/images/textfield.png" alt=""/>
        </section>
        <section id="table" class="waypoint">
            <h3>Data Tables</h3>
            <p>Data tables display sets of data across rows and columns.</p>
            <ul>
                <li>
                    All the columns containing text should left align
                </li>
                <li>
                    Right align columns that contain numbers
                </li>
                <li>
                    Use only icons for buttons when the action is clear
                </li>
            </ul>
            <img width="600" src="assets/images/table.png" alt=""/>
        </section>
        <section id="infobars" class="waypoint">
            <h3>Infobars</h3>
            <p>Infobars provide a globally visible means of alerting users and publishing notifications.</p>
            <ul>
                <li>
                    <p><strong>Information</strong>: Presenting basic information or notifications to the user, which
                        may include a button to perform a follow-up action.
                    </p>
                </li>
            </ul>
            <img width="600" src="assets/images/infobar.png" alt=""/>
        </section>
        <section id="steppers" class="waypoint">
            <h3>Steppers</h3>
            <p>Steppers display progress through a sequence of logical and numbered steps. They may also be used for
                navigation.</p>
            <ul>
                <li>
                    <p><strong>Label</strong>: Labels should be placed below the step icon.
                    </p>
                </li>
                <li>
                    <p><strong>Buttons</strong>: Button panel should left align to content and conforming action
                        should come last.
                    </p>
                </li>
            </ul>
            <img width="600" src="assets/images/steppers.png" alt=""/>
        </section>

        <hr>

        <h2 id="ux" class="waypoint">User eXperience Best Practices and Rules</h2>

        <p>We have listed the UX laws/best practices that you need to follow when you are designing the UI.</p>

        <section id="rules" class="waypoint">
            <h3>The Immutable Rules of UX</h3>
            <ol>
                <li>
                    <b>Field study</b>
                    <ul>
                        <li>Early focus on users and tasks</li>
                        <li>Find out the users' characteristics</li>
                        <li>Observe users doing their normal tasks</li>
                    </ul>
                    <p>Study personas and write user stories, so that you’ll have a better understanding of the
                        requirements</p>
                    <a href="https://docs.google.com/document/d/1rRM-pjBDFbhZau4YLQO9NoaejvoXa05kzpXipHEZgOs/edit"
                       target="blank">User story template - version 1.4</a>
                    <p> Read more on
                        <a href="https://medium.com/@erangatl/getting-started-with-user-stories-f55b1f5341b2"
                           target="blank"> User Stories</a>
                    </p>
                </li>
                <li>
                    <b>Paper Prototyping</b>
                    <p>
                        Paper prototyping is the process of creating rough, often hand-sketched, drawings of a user
                        interface, and using them in a usability test to gather feedback.
                        Participants point to locations on the page that they would click, and screens are manually
                        presented to the user based on the interactions they indicate.
                    </p>
                    <p> Find more on <a href="https://www.nngroup.com/videos/paper-prototyping-101/" target="blank">
                        Paper Prototyping</a> 
                    </p>
                </li>
                <li>
                    <b>Iterative Design</b>
                    <p>Cyclic process of prototyping, testing, analyzing, and refine the product or process</p>
                </li>
            </ol>
            <p> Find more on <a href="https://www.nngroup.com/videos/rules-ux/" target="blank">
                The Immutable Rules of UX</a> 
            </p>
        </section>

        <section id="heuristics" class="waypoint">
            <h3>10 Usability Heuristics for User Interface Design</h3>
            <p>A heuristic evaluation is a usability inspection method mainly used to identify any design issues
                associated with the user interface.</p>
            <p>Jakob Nielsen’s heuristics are probably the most-used usability heuristics for user interface design.</p>
            <ol>
                <li>
                    <b>Visibility of system status</b>
                    <p>
                        The system should always keep users informed about what is going on, through appropriate
                        feedback within reasonable time.
                    </p>
                </li>
                <li>
                    <b>Match between system and the real world</b>
                    <p>
                        The system should speak the users' language, with words, phrases and concepts familiar to the
                        user, rather than system-oriented terms.
                        Follow real-world conventions, making information appear in a natural and logical order.
                    </p>
                </li>
                <li>
                    <b>User control and freedom</b>
                    <p>
                        Users often choose system functions by mistake and will need a clearly marked
                        "emergency exit" to leave the unwanted state without having to go through an extended dialogue.
                        Support undo and redo.
                    </p>
                </li>
                <li>
                    <b>Consistency and standards</b>
                    <p>Users should not have to wonder whether different words, situations, or actions mean the same
                        thing. Follow platform conventions.</p>
                </li>
                <li>
                    <b>Error prevention</b>
                    <p>
                        Even better than good error messages is a careful design which prevents a problem from occurring
                        in the first place. Either eliminate error-prone conditions or check for them and present users
                        with a confirmation option before they commit to the action.
                    </p>
                </li>
                <li>
                    <b>Recognition rather than recall</b>
                    <p>
                        Minimize the user's memory load by making objects, actions, and options visible. The user should
                        not have to remember information from one part of the dialogue to another.
                        Instructions for use of the system should be visible or easily retrievable whenever appropriate.
                    </p>
                </li>
                <li>
                    <b>Flexibility and efficiency of use</b>
                    <p>Accelerators — unseen by the novice user — may often speed up the interaction for the expert
                        user such that the system can cater to both inexperienced and experienced users. Allow users to
                        tailor frequent actions.
                    </p>
                </li>
                <li>
                    <b>Aesthetic and minimalist design</b>
                    <p>
                        Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit
                        of information in a dialogue competes with the relevant units of information and diminishes
                        their relative visibility.
                    </p>
                </li>
                <li>
                    <b>Help users recognize, diagnose, and recover from errors</b>
                    <p>
                        Error messages should be expressed in plain language (no codes), precisely indicate the problem,
                        and constructively suggest a solution.
                    </p>
                </li>
                <li>
                    <b>Help and documentation</b>
                    <p>
                        Even though it is better if the system can be used without documentation, it may be necessary
                        to provide help and documentation. Any such information should be easy to search, focused on
                        the user's task, list concrete steps to be carried out, and not be too large.
                    </p>
                </li>
            </ol>
            <p> Find more on <a href="https://medium.com/@erangatl/10-usability-heuristics-explained-caa5903faba2"
                target="blank"> Usability Heuristics</a>
            </p>
        </section>

        <section id="fittsLaw" class="waypoint">
            <h3>Fitts's Law</h3>
            <p>The time required to rapidly move to a target area is a function of the ratio between the distance to
                the target and the size of the target
            </p>
            <img width="600" src="assets/images/fittsLaw.png" alt="Fitts Law"/>
            <p>Eg. Buttons to complete an action should be close beside active elements. Important actions should be
                larger so they’re easier to select.
            </p>
        </section>

        <section id="hicksLaw" class="waypoint">
            <h3>Hick’s Law</h3>
            <p>The time it takes to make a decision increases as the number of options increases.
            </p>
            <p>Simplify choices for the user by breaking down complex tasks into smaller steps.
                Avoid overwhelming users by highlighting the recommended options.
                Use progressive onboarding to minimize cognitive load for new users.
            </p>
            <img width="600" src="assets/images/hicksLaw.png" alt="Fitts Law"/>
            <p>
                Eg. If there are too many options in a dropdown, users will most likely go through all the options and
                the decision time increases.
                Also if there is too much information to gather, it's better to use a stepper and collect the
                information step by step.
            </p>
        </section>

        <section id="dohertyThreshol" class="waypoint">
            <h3>Doherty Threshold</h3>
            <p>
                Productivity soars when a computer and its users interact at a pace (<400ms) that ensures that neither
                has to wait on the other.
            </p>
            <p>
                Provide system feedback within 400ms to keep users' attention and increase productivity.
                Use perceived performance to increase response time and reduce the perception of waiting.
            </p>
        </section>

        <section id="jakobsLaw" class="waypoint">
            <h3>Jakob’s Law</h3>
            <p>
                Users spend most of their time on other sites. This means that users prefer your site to work the same
                way as all the other sites they already know.
            </p>
            <p>
                Users will transfer expectations they have built around one familiar product to another that appears
                similar. By leveraging existing mental models, we can create superior user experiences in which the
                user can focus on their task rather than learning new models.
                Minimize discordance by empowering users to continue using a familiar version for a limited time.
            </p>
        </section>

        <section id="commonRegion" class="waypoint">
            <h3>Law of Common Region</h3>
            <p>
                Elements tend to be perceived into groups if they are sharing an area with a clearly defined boundary.
            </p>
            <p>
                Adding a border around an element or group of elements is an easy way to create a common region.
                The common region can be created by defining a background behind an element or group of elements.
            </p>
            <img width="600" src="assets/images/commonRegion.png" alt="Fitts Law"/>
        </section>

        <section id="proximity" class="waypoint">
            <h3>Law of Proximity</h3>
            <p>
                Objects that are near, or proximate to each other, tend to be grouped together.
            </p>
            <p>
                Proximity helps to establish a relationship with nearby objects.
                Proximity helps users understand and organize information faster and more efficiently.
            </p>
            <img width="600" src="assets/images/proximity.png" alt="Fitts Law"/>
        </section>

        <section id="similarity" class="waypoint">
            <h3>Law of Similarity</h3>
            <p>
                The human eye tends to perceive similar elements in a design as a complete picture, shape, or group,
                even if those elements are separated.
            </p>
            <p>Elements that have similar visual appearances seem to be more related.</p>
            <p>
                Similarity helps us organize objects by their relatedness to other objects within a group and can be
                affected by the attributes of
                <b>color</b>, <b>size</b>, <b>shape</b>, and <b>orientation</b>.
            </p>
            <img width="600" src="assets/images/similarity.png" alt="Fitts Law"/>
            <p> Find more on
                <a href="https://www.smashingmagazine.com/2016/05/improve-your-designs-with-principles-similarity-proximity-part-1/"
                   target="blank">Law of Similarity</a>
            </p>
        </section>

        <section id="connectedness" class="waypoint">
            <h3>Law of Uniform Connectedness</h3>
            <p>
                Elements that are visually connected are perceived as more related than elements with no connection.
            </p>
            <p>
                Group functions of a similar nature so they are visually connected via colors, lines, frames, or other
                shapes.
            </p>
            <ul>
                <li>Connecting related links or buttons by adding them to the same drop-down menu.</li>
                <li>Using the same bullet shapes, colors, or numbering system (such as Roman numerals, Arabic numbers,
                    etc.) on list items to group them with each other.
                </li>
                <li>Displaying functions of a similar nature, such as login, sign up, and forgotten password, so that
                    they are related, inside a frame or colored rectangle.
                </li>
            </ul>
            
        </section>

        <section id="continuation" class="waypoint">
            <h3>Law of Continuation</h3>
            <p>
                The human eye follows the paths, lines, and curves of the design, and prefers to see a continuous flow
                of visual elements rather than separated objects.
            </p>
            <img width="600" src="assets/images/continuation.jpg" alt="Fitts Law"/>
            <p>
                When designing, we can use continuation to guide the eye through our designs, establishing relationships
                between elements as well as directing attention to specific groups or elements.
            </p>
        </section>

        <section id="millersLaw" class="waypoint">
            <h3>Miller’s Law</h3>
            <p>
                The average person can only keep 7 (plus or minus 2) items in their working memory.
            </p>
            <p>
                Organize content into smaller chunks to help users process, understand, and memorize easily.
            </p>
            <img width="600" src="assets/images/millersLaw.png" alt="Miller’s Law"/>
        </section>

        <section id="razor" class="waypoint">
            <h3>Occam’s Razor</h3>
            <p>
                Among competing hypotheses that predict equally well, the one with the fewest assumptions should be
                selected.
            </p>
            <p>
                Minimalist design or “Keep It Simple”
                “What is the minimum amount of UI that will allow the content to be found and effectively communicate
                to the user?”
            </p>
            <p>“Perfection is achieved not when there is nothing more to add, but when there is nothing left to take
                away”. — Antoine de Saint-Exupéry</p>
            <img width="600" src="assets/images/razor.png" alt="Occam’s Razor"/>
        </section>

        <section id="pareto" class="waypoint">
            <h3>Pareto Principle (80/20 Rule)</h3>
            <p>
                The Pareto principle states that, for many events, roughly 80% of the effects come from 20% of the causes.
            </p>
            <p>
                only a few main variables affect the outcomes, and most other factors will return little impact
            </p>
            <p>*Focus the majority of the effort on the areas that will bring the largest benefits to the most users.
            </p>
            
            <p> Find more on
                <a href="https://www.interaction-design.org/literature/article/the-pareto-principle-and-your-user-experience-work"
                   target="blank">Pareto Principle (80/20 Rule)</a>
            </p>
        </section>

        <section id="parkinsonsLaw" class="waypoint">
            <h3>Parkinson’s Law </h3>
            <p>
                Any task will inflate until all of the available time is spent.
            </p>
            <p>
                The amount of work required adjusts (usually increasing) to the time available for its completion.
            </p>
        </section>

        <section id="peakEndRule" class="waypoint">
            <h3>Peak-End Rule</h3>
            <p>
                People judge an experience largely based on how they felt at its peak and at its end, rather than the
                total sum or average of every moment of the experience.
            </p>
            <p>
                *Pay close attention to the most intense points and the final moments (the “end”) of the user journey.
                Identify the moments when your product is most helpful, valuable, or entertaining and design to make
                those moments even better. Remember that people recall negative experiences more vividly than positive
                ones.
            </p>
            <img width="400" src="assets/images/peakEndRule.png" alt="Peak-End Rule"/>

            <p> Find more on
                <a href="https://www.nngroup.com/articles/peak-end-rule/"
                   target="blank">Peak-End Rule</a>
            </p>
        </section>

        <section id="serialPosition" class="waypoint">
            <h3>Serial Position Effect</h3>
            <p>
                Users have a propensity to best remember the first and last items in a series.
            </p>
            <p>
                *Placing the least important items in the middle of lists can be helpful because these items tend to be
                stored less frequently in long-term and working memory. Positioning key actions on the far left and
                right within elements such as navigation can increase memorization.
            </p>
        </section>

        <section id="tesler" class="waypoint">
            <h3>Tesler’s Law</h3>
            <p>
                Tesler's Law, also known as The Law of Conservation of Complexity, states that for any system there is
                a certain amount of complexity that cannot be reduced.
            </p>
        </section>

        <section id="vonRestorff" class="waypoint">
            <h3>Von Restorff Effect</h3>
            <p>
                The Von Restorff effect, also known as The Isolation Effect, predicts that when multiple similar objects
                are present, the one that differs from the rest is most likely to be remembered.
            </p>
            <p>
                *Make important information or key actions visually distinctive.
            </p>
        </section>

        <section id="zeigarnik" class="waypoint">
            <h3>Zeigarnik Effect</h3>
            <p>
                People remember uncompleted or interrupted tasks better than completed tasks.
            </p>
            <p>
                Use progress bars for complex tasks to visually indicate when a task is incomplete, and thus increase
                the likelihood it will be completed.
            </p>
        </section>

        <section id="halo" class="waypoint">
            <h3>The Halo Effect</h3>
            <p>
                The Halo Effect says that any one element in a user's experience with a company will rub off on their
                interpretation of other elements and their feelings about the company as a whole. Good design in one
                part of a website will make people like other parts better (and like the company better), but the
                opposite is also true.
            </p>
            <p> Find more on
                <a href="https://www.nngroup.com/articles/halo-effect/"
                   target="blank">The Halo Effect</a>
            </p>
        </section>

        <section id="fPattern" class="waypoint">
            <h3>F-Pattern in Reading Digital Content</h3>
            <p>
                Eyetracking research shows that people scan webpages and phone screens in various patterns, one of them
                being the shape of the letter F. We can do things to avoid F-pattern and make it much easier for people
                to scan text.
            </p>
            <p>
                For example, use chunking of text, use bullets, and more important than anything, use headings
                and sub-headings within the text. And make those headings look different from the normal text: larger,
                a different color, bolder, a different typeface, any of these things can work.
            </p>
            <p>And with that, users can scan to the headings and decide if those words are things that they're
                interested in. And if they are, they'll read the normal text below it.
                And if not, they'll read to the next heading, and that's a different pattern than we see
            </p>
            <p> Find more on
                <a href="https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/"
                   target="blank">F-Pattern in Reading Digital Content</a>
            </p>
        </section>

        <section id="pragnanz" class="waypoint">
            <h3>Law of Prägnanz</h3>
            <p>
                People will perceive and interpret ambiguous or complex images as the simplest form possible because
                it is the interpretation that requires the least cognitive effort of us.
            </p>
            <p>
                The human eye likes to find simplicity and order in complex shapes because it prevents us from becoming
                overwhelmed with information. Research confirms that people are better able to visually process and
                remember simple figures than complex figures.
            </p>

            <p> Find more on
                <a href="https://www.smashingmagazine.com/2014/03/design-principles-visual-perception-and-the-principles-of-gestalt/"
                   target="blank">Law of Prägnanz</a>
            </p>
        </section>

        <section id="aesthetic" class="waypoint">
            <h3>Aesthetic Usability Effect</h3>
            <p>
                Users often perceive aesthetically pleasing design as a more usable design.
            </p>
        </section>

        <section id="selection" class="waypoint">
            <h3>Selection Options</h3>
            <p>
                Show all selection options if under 6, use radio buttons or any suitable element instead of dropdown.
            </p>
            <img width="600" src="assets/images/selection.jpeg" alt="selection options"/>
            <p>
                Placing options in a selector drop-down requires two clicks, and hides the options. Use an input
                selector if there are
            </p>
        </section>
    </article>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.5/waypoints.min.js"></script>
<script>
    $('.waypoint').waypoint(function () {
        var ID = $(this).attr('id');
        $('nav a').removeClass('current');
        $('#toc-' + ID).addClass('current');
    }, {
        offset: 40
    });
</script>
</body>
</html>
